<!DOCTYPE HTML>
<html>
    <!--!!!!!!看我看我看我!!!!!! 需要引入这两个依赖-->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<style>
	.body{text-align:center;
		  background-color:#f2f2f2;
		  height: 1000px;
		  margin:0px}

</style>

<script >
    
	function submitx(){
		// 获取要转换的HTML元素
		var element = document.getElementById("mainBody");

		// 使用html2canvas将HTML元素转换为canvas
		html2canvas(element, {
			onrendered: function(canvas) {
				var imgData = canvas.toDataURL('image/png');

				// 创建一个新的jsPDF实例
				var doc = new jsPDF();

				// 设置页面大小和方向（例如A4纸）
				doc.addImage(imgData, 'PNG', 45, 10, 110, 350,'','FAST'); // 图片位置和大小可以根据需要调整

				// 保存为PDF文件 直接下载
				doc.save('output.pdf');

				//使用reader读取并且转换pdf流为base64编码字符串
				// var arraybuffer = doc.output('arraybuffer');
				// var pdfbase64=arrayBufferToBase64(arraybuffer)
				// console.log(pdfbase64)
			}
		});

	}

	function arrayBufferToBase64(arrayBuffer) {
		var uint8Array = new Uint8Array(arrayBuffer);
		var binaryString = '';
		var len = uint8Array.byteLength;
		for (var i = 0; i < len; i++) {
			binaryString += String.fromCharCode(uint8Array[i]);
		}
		return btoa(binaryString);
	}
	


</script>

<body class="body" id="mainBody">
<div class="header-img">
	<div class="title">新 冠 流 调</div>
</div>




<div class="submitDiv">
	<input type="button" onclick="submitx()" value="提    交"/>
</div>
</body>


</html>











